﻿{% extends 'base.html' %}
{% load static %}
{% block title %}
    首页
{% endblock %}
{% block tofile %}
    <script type="text/javascript" src="{% static 'js/jquery-1.11.1.min_044d0927.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/jquery.bxslider_e88acd1b.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/jquery-1.8.2.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/menu.js' %}"></script>

	<script type="text/javascript" src="{% static 'js/select.js' %}"></script>

	<script type="text/javascript" src="{% static 'js/lrscroll_1.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/iban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/fban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/f_ban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/mban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/hban.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/tban.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/lrscroll_1.js' %}"></script>
    <style>
        .sell_right{
	        width:975px; height:356px; overflow:hidden; background-color:#FFF; float:right; border:1px solid #eaeaea; position:relative;
        }
        .sell_right img{
	        -webkit-transition:all .5s; -moz-transition:all .5s; -o-transform:all .5s; -ms-transform:all .5s; transition:all .5s;
        }
        .sell_1{
	    width:244px; height:177px; overflow:hidden; border-bottom:1px solid #eaeaea; position:absolute; left:0; top:0;
        }
        .sell_1:hover img{
        	-moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);
        }
        .s_img{
        	width:185px; height:155px; overflow:hidden; margin-top:6px;
        }
        .s_price{
        	width:100%; height:30px; line-height:30px; overflow:hidden; color:#ff4e00; font-size:14px; text-indent:10px; position:absolute; left:0; top:10px;
        }
        .s_price span{
        	font-size:20px;
        }
        .s_name{
        	width:100%; height:60px; overflow:hidden; background:url(../Images/name.png) repeat-x center top; text-align:center; position:absolute; left:0; bottom:0;
        }
        .s_name h2{
        	height:25px; line-height:25px; overflow:hidden; font-size:16px; margin-top:5px;
        }
        .s_name span{
        	color:#ff4e00; font-size:14px;
        }
        .sell_2{
        	width:244px; height:178px; overflow:hidden; position:absolute; left:0; top:178px;
        }
        .sell_2:hover img{
        	-moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);
        }
        .sell_b3{
        	width:242px; height:356px; overflow:hidden; border-left:1px solid #eaeaea; border-right:1px solid #eaeaea; position:absolute; left:244px; top:0;
        }
        .sell_b3:hover img{
        	-moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);
        }
        .sb_img{
	    width:242px; height:356px; overflow:hidden;
        }
        .sell_4{
        	width:244px; height:178px; overflow:hidden; border-bottom:1px solid #eaeaea; position:absolute; left:488px; top:0;
        }
        .sell_4:hover img{
        	-moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);
        }
        .sell_5{
        	width:244px; height:178px; overflow:hidden; position:absolute; left:488px; top:178px;
        }
        .sell_5:hover img{
	    -moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);
        }
        .sell_b6{
	        width:242px;
	        height:356px;
	        overflow:hidden;
	        border-right:1px solid #eaeaea;
	        position:absolute; right:0;
	        top:0;
        }
        .sell_b6:hover img{
	        -moz-transform:scale(1.1,1.1);
	        -webkit-transform:scale(1.1,1.1);
	        -o-transform:scale(1.1,1.1);
	        -ms-transform:scale(1.1,1.1);
	        transform:scale(1.1,1.1);
        }
        .banner .op_btns .op_prev{ background:url(http://py2596w1j.bkt.clouddn.com/static/images/b_left.png) no-repeat center top; left:0;top:420px;}
        .banner .op_btns .op_next{ background:url(http://py2596w1j.bkt.clouddn.com/static/images/b_right.png) no-repeat center top; right:0;top:420px;}
        .fre_ban .prevf{
	        width:20px; height:40px; overflow:hidden; background: url(http://py2596w1j.bkt.clouddn.com/static/images/s_left.png) no-repeat; cursor:pointer; text-indent:-9999px; position:absolute; left:0; top:123px;
        }
        .fre_ban .nextf{
	        width:20px; height:40px; overflow:hidden; background: url(http://py2596w1j.bkt.clouddn.com/static/images/s_right.png) no-repeat; cursor:pointer; text-indent:-9999px; position:absolute; right:0; top:123px;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="menu_bg">
	<div class="menu">
    	<!--Begin 商品分类详情 Begin-->
    	<div class="nav">
        	<div class="nav_t">全部商品分类</div>
            <div class="leftNav">
                <ul>
                    {% for i in all_category %}
                        <li>
                            <div class="fj">
                        	    <span class="n_img"><span></span><img src="{{ i.is_logo.url }}" /></span>
                                <span class="fl">{{ i.name }}</span>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <!--End 商品分类详情 End-->
    	<ul class="menu_r">
        	<li><a href="Index.html">首页</a></li>
            <li><a href="Food.html">美食</a></li>
            <li><a href="Fresh.html">生鲜</a></li>
            <li><a href="HomeDecoration.html">家居</a></li>
            <li><a href="SuitDress.html">女装</a></li>
            <li><a href="MakeUp.html">美妆</a></li>
            <li><a href="Digital.html">数码</a></li>
            <li><a href="GroupBuying.html">团购</a></li>
        </ul>
        <div class="m_ad">中秋送好礼！</div>
    </div>
</div>
<!--End Menu End-->
    <div class="i_bg bg_color">
	<div class="i_ban_bg">
		<!--Begin Banner Begin-->
    	<div class="banner">
            <div class="top_slide_wrap">
                <ul class="slide_box bxslider">
                    {% for banner_index in banner_index %}
{#                        {% url 'goods:detail' goods_id=banner_index.sku.id %}#}
                        <li><a href=""><img src="{{ banner_index.image.url }}" width="740" height="401" /></a></li>
                    {% endfor %}
                </ul>
                <div class="op_btns clearfix">
                    <a href="#" class="op_btn op_prev"><span></span></a>
                    <a href="#" class="op_btn op_next"><span></span></a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        //var jq = jQuery.noConflict();
        (function(){
            $(".bxslider").bxSlider({
                auto:true,
                prevSelector:jq(".top_slide_wrap .op_prev")[0],nextSelector:jq(".top_slide_wrap .op_next")[0]
            });
        })();
        </script>
        <!--End Banner End-->
        <div class="inews">
        	<div class="news_t">
            	<span class="fr"><a href="#">更多 ></a></span>新闻资讯
            </div>
            <ul>
                {% for foo in news_info %}
                    <li><span>[{{ foo.type.name }}]</span><a href="{{ foo.url }}">{{ foo.name }}</a></li>
                {% endfor %}
            </ul>
            <div class="charge_t">
            	话费充值<div class="ch_t_icon"></div>
            </div>
            <form>
            <table border="0" style="width:205px; margin-top:10px;" cellspacing="0" cellpadding="0">
              <tr height="35">
                <td width="33">号码</td>
                <td><input type="text" value="" class="c_ipt" /></td>
              </tr>
              <tr height="35">
                <td>面值</td>
                <td>
                	<select class="jj" name="city">
                      <option value="0" selected="selected">100元</option>
                      <option value="1">50元</option>
                      <option value="2">30元</option>
                      <option value="3">20元</option>
                      <option value="4">10元</option>
                    </select>
                    <span style="color:#ff4e00; font-size:14px;">￥99.5</span>
                </td>
              </tr>
              <tr height="35">
                <td colspan="2"><input type="submit" value="立即充值" class="c_btn" /></td>
              </tr>
            </table>
            </form>
        </div>
    </div>
    <!--Begin 热门商品 Begin-->
    <div class="content mar_10">
    	<div class="h_l_img">
        	<div class="img"><img src="{% static 'images/l_img.jpg' %}" width="188" height="188" /></div>
            <div class="pri_bg">
                <span class="price fl">￥53.00</span>
                <span class="fr">16R</span>
            </div>
        </div>
        <div class="hot_pro">
        	<div id="featureContainer">
                <div id="feature">
                    <div id="block">
                        <div id="botton-scroll">
                            <ul class="featureUL">
                                {% for hot_good in hot_goods %}
                                    <li class="featureBox">
                                    <div class="box">
                                    	<div class="h_icon"><img src="{% static 'images/hot.png' %}" width="50" height="50" /></div>
                                        <div class="imgbg">
                                        	<a href="{{ hot_good.url }}"><img src="{{ hot_good.image.url }}" width="160" height="136" /></a>
                                        </div>
                                        <div class="name">
                                        	<a href="{{ hot_good.url }}">
                                            <h2>{{ hot_good.name.split.0 }}</h2>
                                            {{ hot_good.name.split.1 }}
                                            </a>
                                        </div>
                                        <div class="price">
                                            <font>￥<span>{{ hot_good.price }}</span></font> &nbsp;
                                        </div>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <a class="h_prev" href="javascript:void();">Previous</a>
                    <a class="h_next" href="javascript:void();">Next</a>
                </div>
            </div>
        </div>
    </div>
    <!--Begin 限时特卖 Begin-->
    <div class="i_t mar_10">
    	<span class="fl">限时特卖</span>
        <span class="i_mores fr"><a href="#">更多</a></span>
    </div>
    <div class="content">
    	<div class="i_sell">
            <div id="imgPlay">
                <ul class="imgs" id="actor">
                    <li><a href="#"><img src="{% static 'images/tm_r.jpg' %}" width="211" height="357" /></a></li>
                    <li><a href="#"><img src="{% static 'images/tm_r.jpg' %}" width="211" height="357" /></a></li>
                    <li><a href="#"><img src="{% static 'images/tm_r.jpg' %}" width="211" height="357" /></a></li>
                </ul>
                <div class="previ">上一张</div>
                <div class="nexti">下一张</div>
            </div>
        </div>
        <div class="sell_right">
            {% for foo in limt_time %}
                {% if foo.is_big_title == 0 %}
                    <div class="sell_{{ forloop.counter }}">
            	    <div class="s_img"><a href="#"><img src="{{ foo.image.url }}" width="185" height="155" /></a></div>
            	    <div class="s_price">￥<span>{{ foo.price }}</span></div>
                     <div class="s_name">
                	    <h2><a href="#">{{ foo.name }}</a></h2>
                        倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                        </div>
                     </div>
                    {% else %}
                    <div class="sell_b{{ forloop.counter }}">
            	        <div class="sb_img"><a href="#"><img src="{{ foo.image.url }}" width="242" height="356" /></a></div>
            	        <div class="s_price">￥<span>{{ foo.price }}</span></div>
                        <div class="s_name">
                        	<h2><a href="#">{{ foo.name }}</a></h2>
                            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <!--End 限时特卖 End-->
    <div class="content mar_20">
    	<img src="{% static 'images/mban_1.jpg' %}" width="1200" height="110" />
    </div>
	<!--Begin 进口 生鲜 Begin-->
    {% for ss in types %}
        <div class="i_t mar_10">
    	    <span class="floor_num">{{ forloop.counter }}F</span>
    	    <span class="fl">{{ ss.name }}</span>
            <span class="i_mores fr">
{#                {% url 'goods:list' ss.id 1 %}#}
                 <a href="">更多>></a>
            </span>
        </div>
        <div class="content">
    	    <div class="fresh_left">
        	    <div class="fre_ban">
            	    <div id="imgPlay1">
                        <ul class="imgs" id="actor{{ forloop.counter }}">
                            <li><a href="#"><img src="{{ ss.image.url }}" width="211" height="286" /></a></li>
                            <li><a href="#"><img src="{{ ss.image.url }}" width="211" height="286" /></a></li>
                            <li><a href="#"><img src="{{ ss.image.url }}" width="211" height="286" /></a></li>
                        </ul>
                        <div class="prevf">上一张</div>
                        <div class="nextf">下一张</div>
                </div>
            </div>
            <div class="fresh_txt">
            	<div class="fresh_txt_c">
                    {% for banner in ss.title_banners %}
{#                        {% url 'goods:detail' banner.sku.id %}#}
                        <a href="">{{ banner.sku.name }}</a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="fresh_mid">
        	<ul>
                {% for banner in ss.image_banners %}
            	    <li>
{#                    {% url 'goods:detail' banner.sku.id %}#}
                    	<div class="name"><a href="">{{ banner.sku.name }}</a></div>
                        <div class="price">
                        	<font>￥<span>{{ banner.sku.price }}</span></font> &nbsp;{{ banner.sku.integral }}R
                        </div>
{#                        {% url 'goods:detail' banner.sku.id %}#}
                        <div class="img"><a href=""><img src="{{ banner.sku.image.url }}" width="185" height="155" /></a></div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="fresh_right">
        	<ul>
                {% for images in ss.huodong_image %}
                    <li><a href="#"><img src="{{ images.image.url }}" width="260" height="220" /></a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endfor %}


    <!--End 进口 生鲜 End-->
    <!--Begin 食品饮料 Begin-->

    <!--Begin 猜你喜欢 Begin-->
    <div class="i_t mar_10">
    	<span class="fl">猜你喜欢</span>
    </div>
    <div class="like">
        <div id="featureContainer1">
            <div id="feature1">
                <div id="block1">
                    <div id="botton-scroll1">
                        <ul class="featureUL">
                            <li class="featureBox">
                                <div class="box">
                                    <div class="imgbg">
                                        <a href="#"><img src="Picture/hot1.jpg" width="160" height="136" /></a>
                                    </div>
                                    <div class="name">
                                        <a href="#">
                                        <h2>德国进口</h2>
                                        德亚全脂纯牛奶200ml*48盒
                                        </a>
                                    </div>
                                    <div class="price">
                                        <font>￥<span>189</span></font> &nbsp; 26R
                                    </div>
                                </div>
                            </li>
                            <li class="featureBox">
                                <div class="box">
                                    <div class="imgbg">
                                        <a href="#"><img src="Picture/hot2.jpg" width="160" height="136" /></a>
                                    </div>
                                    <div class="name">
                                        <a href="#">
                                        <h2>iphone 6S</h2>
                                        Apple/苹果 iPhone 6s Plus公开版
                                        </a>
                                    </div>
                                    <div class="price">
                                        <font>￥<span>5288</span></font> &nbsp; 25R
                                    </div>
                                </div>
                            </li>
                            <li class="featureBox">
                                <div class="box">
                                    <div class="imgbg">
                                        <a href="#"><img src="Picture/hot3.jpg" width="160" height="136" /></a>
                                    </div>
                                    <div class="name">
                                        <a href="#">
                                        <h2>倩碧特惠组合套装</h2>
                                        倩碧补水组合套装8折促销
                                        </a>
                                    </div>
                                    <div class="price">
                                        <font>￥<span>368</span></font> &nbsp; 18R
                                    </div>
                                </div>
                            </li>
                            <li class="featureBox">
                                <div class="box">
                                    <div class="imgbg">
                                        <a href="#"><img src="Picture/hot4.jpg" width="160" height="136" /></a>
                                    </div>
                                    <div class="name">
                                        <a href="#">
                                        <h2>品利特级橄榄油</h2>
                                        750ml*4瓶装组合 西班牙原装进口
                                        </a>
                                    </div>
                                    <div class="price">
                                        <font>￥<span>280</span></font> &nbsp; 30R
                                    </div>
                                </div>
                            </li>
                            <li class="featureBox">
                                <div class="box">
                                    <div class="imgbg">
                                        <a href="#"><img src="Picture/hot4.jpg" width="160" height="136" /></a>
                                    </div>
                                    <div class="name">
                                        <a href="#">
                                        <h2>品利特级橄榄油</h2>
                                        750ml*4瓶装组合 西班牙原装进口
                                        </a>
                                    </div>
                                    <div class="price">
                                        <font>￥<span>280</span></font> &nbsp; 30R
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <a class="l_prev" href="javascript:void();">Previous</a>
                <a class="l_next" href="javascript:void();">Next</a>
            </div>
        </div>
    </div>
    <!--End 猜你喜欢 End-->
</div>
{% endblock %}